<template>
	<view style="margin: 20px 0;">
		<!-- <van-dialog id="van-dialog" /> -->
		<van-cell-group>
		  <van-cell title="缴费类型" :value="type" is-link @click="onSelectType" />
		  <m-date-field label="缴费时间" minDate="1990-01-01 00:00" maxDate="2099-01-01 00:00" type="time" @change="onChange" placeholder="请选择缴费时间" />
		  <van-field label="缴费金额" type="number"  input-align="right" data-type="total" @change="onChange" right-icon="edit"
		   placeholder="请输入缴费金额" />
		   
		</van-cell-group>
		<view style="margin-top: 20px;"></view>
		<van-cell-group>
			<van-field label="费用说明" type="textarea" :autosize="{minHeight:80}" data-type="note" @change="onChange"
			 placeholder="请输入费用说明" />
			 
		</van-cell-group>
		
		<view style="background-color: #fff;padding: 10px; 16px">
			<van-uploader
			  :file-list="fileList"
			  max-count="20"
			  @after-read="afterRead"
			/>
		</view>
		
		<view style="margin-top: 20px;">
			<van-button :color="primaryColor" :square="true" size="normal" @click="onAddRefound" block>确认提交</van-button>
		</view>
		
		<van-action-sheet :show="sheetVisibility" @close="onCloseSheet">
			<m-titlebar  title="报销种类" @confirm="onChangeType" @cancel="onCloseSheet" :color="primaryColor">
				<van-picker ref="typePicker" :columns="typeColumns" />
			</m-titlebar>
		</van-action-sheet>
		
		
		<van-dialog id="van-dialog" />
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	import Dialog from '@/wxcomponents/dialog/dialog'
	import Toast from '@/wxcomponents/toast/toast'
	export default {
		data() {
			return {
				sheetVisibility: false,
				typeColumns:[],
				primaryColor:getApp().globalData.primaryColor,
				fileList: [],
				type:'请选择报销类型',
				reqData: {
					data:{}
				},
				carId:''
			};
		},
		async onLoad(options) {
			this.carId = options.carid
			await this.getRefoundTypes()
		},
		methods:{
			async getRefoundTypes(){
				try{
					this.typeColumns = await utils.req('/reimbursement/getReimbursementTypes', {token: uni.getStorageSync('userinfo').token})
				}catch(e){
					Toast(e.msg)
				}
			},
			onSelectType(){
				this.sheetVisibility = true
			},
			onCloseSheet(){
				this.sheetVisibility = false
			},
			onChangeType(e){
				const values = this.$refs.typePicker.getValues()
				this.type = values[0]
				this.onCloseSheet()
			},
			onChange(event){
				const type = event.currentTarget.dataset.type
				this.reqData.data[type] = event.detail
			},
			async onAddRefound(){
				try{
					if(this.type == '请选择报销类型' || !this.reqData.data.total || !this.reqData.data.time){
						Toast('信息填写不完整，请检查')
						return
					}
					this.reqData.token = uni.getStorageSync('userinfo').token
					this.reqData.data.carId = this.carId
					this.reqData.data.type = this.type
					this.reqData.data.imgs = this.fileList.map(o => o.shortUrl)
					uni.showLoading({
						title:'上传数据...',
						mask:true
					})
					await utils.req('/reimbursement/addReimbursements', this.reqData)
					uni.navigateBack({
						delta:1
					})
				}catch(e){
					console.error(e)
					Toast(e.msg)
				}finally{
					uni.hideLoading()
				}
				
			},
			afterRead(e){
				const { file } = e.detail;
				console.log(file)
				    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				const _this = this
				uni.uploadFile({
				  url: `${utils.baseUrl}/storage/create`, // 仅为示例，非真实的接口地址
				  filePath: file.path,
				  name: 'file',
				  // formData: { user: 'test' },
				  success(res) {
					// 上传完成需要更新 fileList
					res = JSON.parse(res.data)
					_this.fileList = [..._this.fileList, {url: `${utils.fileUrl}/${res.data}`, shortUrl: res.data}];
					// this.fileList = this.fileList
				  }
				});
			}
		}
	}
</script>

<style lang="scss">

</style>
